<script setup lang="ts">
import { onMounted, ref } from "vue";
import request from "../utils/fetchUtil"
import { useRouter } from "vue-router";

const router = useRouter()

//店铺数据的接口
export interface Store {
  /**
   * 店铺图片
   */
  image: string;
  /**
   * 店铺ID
   */
  storeId: number;
  /**
   * 店铺名称
   */
  storeName: string;

}

//商品数据的接口
export interface Goods {
  /**
   * 距离
   */
  distance: number;
  /**
   * 商品ID
   */
  goodsId: number;
  /**
   * 商品名称
   */
  goodsName: string;
  /**
   * 商品图片
   */
  image: string;
  /**
   * 销量
   */
  number: number;
  /**
   * 起送价
   */
  price: number;
  /**
   * 评分
   */
  score: number;
  /**
   * 配送费
   */
  sending: string;
  /**
   * 店铺ID
   */
  storeId: number;
}

//定义店铺数据的变量（响应式变量）
const storeList = ref<Store[]>()


//定义公告的响应式变量
const annouuncement = ref<string>()

//定义商品列表的响应式变量
const goodsList = ref<Goods[]>()

//生命周期
onMounted(() => {

  //请求后端接口
  request<Store[]>("/index/store").then(res => {
    console.log(res);
    //将请求回来的数据赋值给响应式变量
    storeList.value = res
  })

  //请求后端接口
  request<string>("/index/announcement").then(res => {
    annouuncement.value = res
  })

  //请求后端接口
  request<Goods[]>("/index/goods").then(res => {
    goodsList.value = res
  })
})

//定义跳转店铺的方法
const goToStore = (id: number) => {
  console.log(id);
  //点击店铺的时候携带ID跳转
  router.push({
    path: '/store',
    query: {
      id: id,
    },
  })
}
</script>

<template>
  <div class="index">
    <div class="header-bg">
      <div class="header-title-box">
        <div class="back-btn">
          <img src="../assets/img/back-btn.png" alt="" srcset="">
        </div>
        <div class="header-title">来点</div>
        <div class="back-btn">

        </div>
      </div>
      <div class="header-search">
        <div class="search-img">
          <img class="search-icon" src="../assets/img/icon-search.png" alt="" srcset="">
        </div>
        <div class="search-input">
          <input type="text" placeholder="输入你想要的东西" />
        </div>
      </div>
      <div class="navigation-bg">
        <div class="navigation">
          <!-- 在页面中使用响应式变量 -->
          <div class="item" v-for="(item, index) in storeList" :key="index" @click="goToStore(item.storeId)">
            <img :src="item.image" alt="" srcset="">
            <div class="text">{{ item.storeName }}</div>
          </div>

        </div>
      </div>
    </div>
    <div class="announcement">
      <div>平台</div>
      <div>公告</div>
      <div>{{ annouuncement }}</div>
    </div>
    <!-- banner -->
    <div class="banner">
      <img src="../assets/img/banner1.png" alt="" srcset="">
    </div>

    <!-- 筛选，排序 -->
    <div class="sorting">
      <div class="item active">综合排序
        <img src="../assets/img/icon-gt.png" alt="" srcset="">
      </div>
      <div class="item">销量</div>
      <div class="item">星级</div>
      <div class="item">距离</div>
    </div>

    <!-- 商品列表 -->
    <div class="goods">
      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <img :src="item.image" alt="">
        <div class="describe">
          <div class="title">{{ item.goodsName }}</div>
          <div class="grade">
            <div>{{ item.score }}分</div>
            <div>月售401</div>
          </div>
          <div class="order">
            <div>起送¥17 配送¥3</div>
            <div>10分钟丨500m</div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="tab-box">
    <div class="tab">

    </div>
  </div>
</template>

<style lang="less">
.index {
  width: 10rem;
  margin: 0 auto;

  .header-bg {
    width: 10rem;
    height: 5.28rem;
    background: linear-gradient(180deg, rgba(0, 116, 255, 1) 12.5%, rgba(133, 188, 255, 1) 100%);
  }

  .header-title-box {
    height: 1.1733rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .back-btn {
      width: .7467rem;
      height: .7467rem;
      margin-left: .4267rem;

      img {
        display: block;
        width: .7467rem;
        height: .7467rem;
      }
    }
  }

  .header-search {
    width: 9.1467rem;
    height: .8rem;
    border-radius: .4rem;
    background: rgba(255, 255, 255, 0.84);
    margin: .32rem auto .4rem auto;
    display: flex;

    .search-img {
      width: .3733rem;
      height: .3733rem;
      margin-top: .2133rem;
      margin-left: .32rem;

      .search-icon {
        display: block;
        width: .3733rem;
        height: .3733rem;
      }

    }

    .search-input {
      width: 8rem;
      height: .8rem;
      margin-left: .2133rem;

      input {
        display: block;
        width: 8rem;
        height: .8rem;
        border: 0;
        outline: none;
        font-size: .3467rem;
        font-weight: 500;
        color: rgba(144, 152, 160, 1);
        background-color: rgba(0, 0, 0, 0);
      }
    }

  }

  .navigation-bg {
    padding-top: .5333rem;
    background-color: white;
    width: 10rem;
    border-top-left-radius: .4267rem;
    border-top-right-radius: .4267rem;

    .navigation {
      width: 8.64rem;
      height: 2.0533rem;
      display: flex;
      margin: 0 auto;
      justify-content: space-between;

      .item {
        img {
          display: block;
          width: 1.28rem;
          height: 1.28rem;
        }

        .text {
          font-size: .32rem;
          font-weight: 500;
          line-height: .4635rem;
          color: rgba(46, 52, 58, 1);
          margin-top: 12px;
        }
      }
    }
  }

  .announcement {
    font-size: .32rem;
    width: 9.1467rem;
    height: .7467rem;
    border-radius: .3733rem;
    background: rgba(248, 248, 248, 1);
    display: flex;
    align-items: center;
    margin: .48rem auto .5333rem auto;

    div:first-child {
      color: rgba(0, 0, 0, 1);
      margin-left: .32rem;
    }

    div:nth-child(2) {
      color: rgba(37, 136, 255, 1);
    }

    div:last-child {
      color: rgba(46, 52, 58, 1);
      width: 6.6133rem;
      /* 1.文字强制一行显示*/
      white-space: nowrap;
      // 2.溢出部分隐藏
      overflow: hidden;
      // 3.溢出部分使用省略号代替
      text-overflow: ellipsis;
      margin-left: .48rem;
    }
  }

  // banner
  .banner {
    width: 9.1733rem;
    height: 2.4267rem;
    margin-left: auto;
    margin-right: auto;

    img {
      display: block;
      width: 9.1733rem;
      height: 2.4267rem;
    }
  }

  //排序筛选
  .sorting {
    width: 9.1733rem;
    font-size: .32rem;
    color: #000;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: .48rem;

    .active {
      color: rgba(37, 136, 255, 1);
    }

    .item {
      margin-right: .8rem;
      position: relative;

      img {
        display: block;
        width: .16rem;
        height: .2667rem;
        position: absolute;
        right: -0.32rem;
        top: .1067rem;
        transform: rotate(90deg);
      }
    }
  }

  //商品列表
  .goods {
    width: 9.1733rem;
    margin: .48rem auto 1.3333rem auto;

    .goods-item {
      display: flex;
      height: 1.8667rem;

      img {
        display: block;
        width: 1.7333rem;
        height: 1.7333rem;

      }

      .describe {
        margin-left: .32rem;
        font-size: .32rem;
        color: rgba(144, 152, 160, 1);

        .title {
          color: rgba(46, 52, 58, 1);
          font-size: .3733rem;
        }

        .grade {
          display: flex;
          margin-top: .1333rem;

          div:first-child {
            color: rgba(37, 136, 255, 1);
            margin-right: .08rem;
          }
        }

        .order {
          margin-top: .1333rem;
          display: flex;
          width: 6.96rem;
          justify-content: space-between;
        }
      }
    }
  }

}

// tab
.tab-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.3067rem;
  background-color: antiquewhite;
}
</style>
